import { Bounds, Container, getGlobalBounds, Rectangle, } from "pixi.js";
import { PixijsRender } from "../PixijsRender";
import { BaseEntity } from "./BaseEntity";
import { ViewState } from "./PixijsEntities";

/**
 * 文本实体
 * const text = new Text({
 *     text: 'Hello Pixi!',
 *     style: {
 *         fontFamily: 'Arial',
 *         fontSize: 24,
 *         fill: 0xff1010,
 *         align: 'center',
 *     }
 * });
 */
const __bounds = new Bounds();
export class TextEntity extends BaseEntity {
   
    text: string = "Hello World";
    fontSize: number = 60;
    color: string = "#ffffff";
    boundsArea: {width: number, height: number} = {width: 200, height: 200};
    private __focus: boolean = false;

    private __text: HTMLTextAreaElement;

    constructor(pixiRender: PixijsRender) {
        super(pixiRender);
        this.view = new Container({boundsArea: new Rectangle(0, 0, 100, 100)}); // 创建文本视图
        this.name = 'text';
        this.className = this.constructor.name;
    }

    enterEdit() {
        console.log('enterEdit');
        if(this.__text) {   
            this.__text.focus();
        }
        else {
            this.__focus = true;
        }
    }

    loadAssets(): void {
        this.__text = document.createElement('textarea');
        this.__render.app.canvas.parentElement.appendChild(this.__text);
        this.__text.onchange = (e) => {
            //@ts-expect-error
            this.text = e.target.value;
        }
        this.viewState = ViewState.Showing;
        this.applyData();
        if(this.__focus) {
            this.__text.focus();
            this.__focus = false;
        }
    }

    unloadAssets(): void {
        if(this.__text) this.__text.remove();
    }

    updateCSS(): void {
        getGlobalBounds(this.view, false, __bounds);
        // 假设 this.view.worldTransform 是一个包含 a, b, c, d, tx, ty 的矩阵对象
        const worldTransform = this.view.worldTransform;

        // 将 worldTransform 转换为 CSS transform
        const cssTransform = `matrix(${worldTransform.a}, ${worldTransform.b}, ${worldTransform.c}, ${worldTransform.d}, ${worldTransform.tx}, ${worldTransform.ty})`;

        if (this.__text) {
            this.__text.style.transform = cssTransform;
            this.__text.style.transformOrigin = `${0}px ${0}px`;
        }

        //判断text的bounds是否在canvas窗口内
        const canvasBounds = this.__render.app.canvas.getBoundingClientRect();
        const textBounds = this.__text.getBoundingClientRect();
        if(textBounds.right < canvasBounds.left || textBounds.left > canvasBounds.right || textBounds.bottom < canvasBounds.top || textBounds.top > canvasBounds.bottom) {
            this.__text.style.visibility = 'hidden';
        }
        else {
            this.__text.style.visibility = 'visible';
        }
    }

    applyData(): void {
        super.applyData();
        if(!this.__text) return;
        this.__text.value = this.text;
        this.__text.style.fontSize = this.fontSize + 'px';
        this.__text.style.wordWrap = 'break-word';
        // this.__text.style.width = this.boundsArea.width + 'px';
        // this.__text.style.height = this.size.height + 'px';
        this.__text.style.color = this.color;
        this.__text.style.position = 'absolute';
        this.__text.style.left = '0px';
        this.__text.style.top = '0px'; 
        this.__text.style.background = 'none';
        this.__text.style.border = 'none';
        this.__text.style.outline = 'none';
        this.__text.style.resize = 'none';
        this.__text.style.overflow = 'hidden';
        this.__text.style.userSelect = 'none';
        this.__text.style.pointerEvents = 'none';
        getGlobalBounds(this.view, false, __bounds);
        // 假设 this.view.worldTransform 是一个包含 a, b, c, d, tx, ty 的矩阵对象
        const worldTransform = this.view.worldTransform;

        // 将 worldTransform 转换为 CSS transform
        const cssTransform = `matrix(${worldTransform.a}, ${worldTransform.b}, ${worldTransform.c}, ${worldTransform.d}, ${worldTransform.tx}, ${worldTransform.ty})`;

        if (this.__text) {
            this.__text.style.transform = cssTransform;
            this.__text.style.transformOrigin = `${0}px ${0}px`;
            this.__text.style.width = this.boundsArea.width + 'px';
            this.__text.style.height = this.boundsArea.height + 'px';
        }

        this.view.boundsArea.width = this.boundsArea.width;
        this.view.boundsArea.height = this.boundsArea.height;
    }

    get size() {
        let width = this.boundsArea.width;
        let height = this.boundsArea.height;
        return {
            width, height
        }
    }

    set size(s: { width: number, height: number }) {
        if(s.width <= 0) {
            s.width = -s.width;
            this.scale.x *= -1;
            this.view.scale.x = -1;
        }
        
        if(s.height <= 0) {
            s.height = -s.height;
            this.scale.y *= -1;
            this.view.scale.y = -1;
        }
        this.view.boundsArea.width = s.width;
        this.view.boundsArea.height = s.height;
        this.boundsArea.width = s.width;
        this.boundsArea.height = s.height;
        if(this.__text) {
            this.__text.style.width = s.width + 'px';
            this.__text.style.height = s.height + 'px';
        }
    }
}